﻿$(function () {
    const { ref, reactive, computed } = Vue;
    const app = Vue.createApp({
        setup() {
            const ruleFormRef = ref();

            const helpLineText = ref("输入您账户绑定的手机，我们将会发送验证码短信。");

            const state = reactive({
                identifyType: 'phone',
                phone: '',
                password: '',
                email: '',
                num: '86'
            })

            const codeConfig = reactive({
                text: '获取验证码',
                countDown: 60,
                disabled: false
            })

            const checkPhone = (rule, value, callbcak) => {
                if (value === '') {
                    callbcak(new Error('请输入您的手机号码'));
                } else if (!(/^[1][3,4,5,7,8][0-9]{9}$/g.test(value))) {
                    callbcak(new Error('请输入正确的手机号码'));
                } else {
                    callbcak()
                }
            }

            const checkEmail = (rule, value, callbcak) => {
                if (value === '') {
                    callbcak(new Error('请输入您的邮箱'));
                } else if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/g.test(value))) {
                    callbcak(new Error('请输入正确的邮箱'));
                } else {
                    callbcak()
                }
            }

            const rules = reactive({
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                phoneCode: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' },
                    { min: 6, message: '验证码应为6位数字', trigger: 'blur' }
                ],
                email: [
                    { validator: checkEmail, trigger: 'blur' }
                ]
            })

            const getCodeBtnOnClick = () => {
                // code get code
                codeConfig.disabled = true;
                let timeCount = codeConfig.countDown;
                const countDown = () => {
                    setTimeout(() => {
                        timeCount--;
                        codeConfig.text = `再次发送(${timeCount})`;
                        if (timeCount <= 0) {
                            codeConfig.text = '获取验证码';
                            codeConfig.disabled = false;
                        } else {
                            countDown()
                        }
                    }, 1000)
                }
                countDown()
            }

            const subitForm = ((formEl) => {
                if (!formEl) return;
                formEl.validate((valid) => {
                    if (valid) {
                        console.log('submit!')
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            })

            const tabOnChange = (tabName) => {
                const text = {
                    phone: '输入您账户绑定的手机，我们将会发送验证码短信。',
                    email: '输入您账户绑定的邮箱，我们将会发送重置邮件。'
                }
                helpLineText.value = text[tabName];
                state.phoneCode = '';
            }

            return {
                helpLineText,
                ruleFormRef,
                state,
                rules,
                codeConfig,
                getCodeBtnOnClick,
                subitForm,
                tabOnChange
            };
        }
    });
    const { ElTabs, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption } = ElementPlus;
    app.use(ElTabs);
    app.use(ElForm);
    app.use(ElFormItem);
    app.use(ElInput);
    app.use(ElButton);
    app.use(ElSelect);
    app.use(ElOption);
    app.mount('#main-container');
})